<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理框架</title>
    <link href="https://cdn.tailwindcss.com" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
     <link rel="stylesheet" href="{%static 'bootstrap.min.css'%}">
    <script src="{% static 'bootstrap.min.js' %}"></script>
    <script src="{% static 'popper.min.js' %}"></script>
    <link rel="stylesheet" href='{% static 'css/base.css'%}'>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
  </style>
</head>
<body class="bg-gray-100 h-full">
  <!-- 顶部导航栏 -->
  <nav class="bg-indigo-600 p-4">
    <div class="container mx-auto text-white flex justify-between items-center">
      <div class="text-xl" class = "font-bold">管理平台</div>
      <ul class="flex space-x-4">
        <li><a href="#" class="hover:font-bold">首页</a></li>
        <li><a href="#" class="hover:font-bold">1</a></li>
        <li><a href="#" class="hover:font-bold">2</a></li>
        <li><a href="#" class="hover:font-bold">3</a></li>
        <li><a href="#" class="hover:font-bold">4</a></li>
        <li><a href="#" class="hover:font-bold">5</a></li>
      <li><a href="#" class="hover:font-bold bg-orange-500 text-white py-2 px-4 rounded-full">登录</a></li>
      </ul>
    </div>
  </nav>

  <!-- 页面主体布局 -->
  <div class="h-full">
    <div class="grid grid-cols-10 gap-4 h-full">
      <!-- 侧边栏 -->
      <aside class="col-span-2 bg-white shadow-lg rounded-lg p-4 overflow-y-auto">
        <ul class="space-y-2">
          <li><a href="#" class="block p-2 bg-white rounded hover:bg-blue-200 transition-transform transform hover:scale-105">首页</a></li>
          <li><a href="#" class="block p-2 hover:bg-indigo-200 transition-transform transform hover:scale-105">风速情况</a></li>
          <li><a href="#" class="block p-2 hover:bg-indigo-200 transition-transform transform hover:scale-105">应变情况</a></li>
          <li><a href="#" class="block p-2 hover:bg-indigo-200 transition-transform transform hover:scale-105">裂缝情况</a></li>
          <li><a href="#" class="block p-2 hover:bg-indigo-200 transition-transform transform hover:scale-105">位移情况</a></li>
          <li><a href="#" class="block p-2 hover:bg-indigo-200 transition-transform transform hover:scale-105">风压情况</a></li>
          <li><a href="#" class="block p-2 hover:bg-indigo-200 transition-transform transform hover:scale-105">人工检查</a></li>
          <li><a href="http://localhost:8000/blog/change" class="block p-2 hover:bg-indigo-200 transition-transform transform hover:scale-105">设备信息</a></li>
          <li><a  href="http://localhost:8000/blog/change" class="block p-2 hover:bg-indigo-200 transition-transform transform hover:scale-105">地区</a></li>
        </ul>
      </aside>

      <!-- 文本内容区域 -->
      <main id="main-content" class="col-span-8 bg-white shadow-lg rounded-lg p-6 transition-opacity duration-500 overflow-y-auto">
          <div >
           <div class="chart-container"> {{ chart_html|safe }}</div>
          </div>
      </main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    // 确保DOM加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化flatpickr
        flatpickr(document.getElementById('datePicker'), {
            // 配置选项
        });

        // 给确定按钮添加点击事件
        document.getElementById('confirmButton').addEventListener('click', function() {
            var selectedDate = document.getElementById('datePicker').value;
            console.log("选中的日期是：", selectedDate);
            // 执行其他逻辑...
        });
    });
</script>
        </div>
      </div>
    </div>
  </div>

  <!-- Script for handling selected state and content changes -->
  <script>
    const links = document.querySelectorAll('aside ul li a');
    const contentTitle = document.getElementById('content-title');
    const contentText = document.getElementById('content-text');
    const mainContent = document.getElementById('main-content');

    const contentMap = {
      "首页": { title: "首页", text: "这是首页的内容。" },
      "风速情况": { title: "风速情况", text: "这是风速情况的相关内容。" },
      "应变情况": { title: "应变情况", text: "这是应变情况的相关内容。" },
      "裂缝情况": { title: "裂缝情况", text: "这是裂缝情况的相关内容。" },
      "位移情况": { title: "位移情况", text: "这是位移情况的相关内容。" },
      "风压情况": { title: "风压情况", text: "这是风压情况的相关内容。" },
      "人工检查": { title: "人工检查", text: "这是人工检查的相关内容。" },
      "设备信息": { title: "设备信息", text: "这是设备信息的相关内容。" },
      "地区": { title: "地区", text: "这是地区相关的内容。" },
    };

    links.forEach(link => {
      link.addEventListener('click', function(event) {
        event.preventDefault();
        // 重置所有链接的样式
        links.forEach(l => l.classList.remove('bg-blue-300', 'font-bold'));
        // 当前链接加粗和背景色变化
        this.classList.add('bg-blue-300', 'font-bold');
        
        // 改变内容区域文字
        const newContent = contentMap[this.innerText];
        if (newContent) {
          // 增加淡入淡出动画
          mainContent.classList.add('opacity-0');
          setTimeout(() => {
            contentTitle.innerText = newContent.title;
            contentText.innerText = newContent.text;
            mainContent.classList.remove('opacity-0');
          }, 300); // 动画时长
        }
      });
    });
  </script>

</body>
</html>
